<!DOCTYPE html>
<html>

<head>
    <title>jquery流式布局插件seeders-waterfall演示Demo</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="css/seeders-waterfall.css">
    <style>
        body {
            width: 800px;
            margin: 15px auto;
        }
    </style>
</head>

<body>
    <div class="waterfallwarp">
        <div class="item">
            <img src="./imgs/waterfall01.jpg" alt="">
            <p>一个人的百一生应该是这样度过的：当他回首往事的时候度，他不会因为虚度年华而悔恨，也不会因为碌碌无为而羞耻；这样，在临死的时候，他就能够说：“我的整个生命和全部精力，都已经献给世界上最壮丽的事业——为人类的解放而斗争。
                --保尔柯擦金</p>
            <div class="avater">
                <img src="./imgs/avatar.png" alt="">
                <div class="avaterBottom">
                    <span>小猪的头像</span>
                    <p><span>小清新</span></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="./imgs/waterfall02.jpg" alt="">
            <p>一个人的百一生应该是这样度过的：当他回首往事的时候度，他不会因为虚度年华而悔恨，也不会因为碌碌无为而羞耻；这样，在临死的时候，他就能够说：“我的整个生命和全部精力，都已经献给世界上最壮丽的事业——为人类的解放而斗争。
                --保尔柯擦金</p>
            <div class="avater">
                <img src="./imgs/avatar.png" alt="">
                <div class="avaterBottom">
                    <span>小猪的头像</span>
                    <p><span>小清新</span></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="./imgs/waterfall03.jpg" alt="">
            <p>一个人的百一生应该是这样度过的：当他回首往事的时候度，他不会因为虚度年华而悔恨，也不会因为碌碌无为而羞耻；这样，在临死的时候，他就能够说：“我的整个生命和全部精力，都已经献给世界上最壮丽的事业——为人类的解放而斗争。
                --保尔柯擦金</p>
            <div class="avater">
                <img src="./imgs/avatar.png" alt="">
                <div class="avaterBottom">
                    <span>小猪的头像</span>
                    <p><span>小清新</span></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="./imgs/waterfall04.jpg" alt="">
            <p>一个人的百一生应该是这样度过的：当他回首往事的时候度，他不会因为虚度年华而悔恨，也不会因为碌碌无为而羞耻；这样，在临死的时候，他就能够说：“我的整个生命和全部精力，都已经献给世界上最壮丽的事业——为人类的解放而斗争。
                --保尔柯擦金</p>
            <div class="avater">
                <img src="./imgs/avatar.png" alt="">
                <div class="avaterBottom">
                    <span>小猪的头像</span>
                    <p><span>小清新</span></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="./imgs/waterfall05.jpg" alt="">
            <p>一个人的百一生应该是这样度过的：当他回首往事的时候度，他不会因为虚度年华而悔恨，也不会因为碌碌无为而羞耻；这样，在临死的时候，他就能够说：“我的整个生命和全部精力，都已经献给世界上最壮丽的事业——为人类的解放而斗争。
                --保尔柯擦金</p>
            <div class="avater">
                <img src="./imgs/avatar.png" alt="">
                <div class="avaterBottom">
                    <span>小猪的头像</span>
                    <p><span>小清新</span></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="./imgs/waterfall06.jpg" alt="">
            <p>一个人的百一生应该是这样度过的：当他回首往事的时候度，他不会因为虚度年华而悔恨，也不会因为碌碌无为而羞耻；这样，在临死的时候，他就能够说：“我的整个生命和全部精力，都已经献给世界上最壮丽的事业——为人类的解放而斗争。
                --保尔柯擦金</p>
            <div class="avater">
                <img src="./imgs/avatar.png" alt="">
                <div class="avaterBottom">
                    <span>小猪的头像</span>
                    <p><span>小清新</span></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="./imgs/waterfall07.jpg" alt="">
            <p>一个人的百一生应该是这样度过的：当他回首往事的时候度，他不会因为虚度年华而悔恨，也不会因为碌碌无为而羞耻；这样，在临死的时候，他就能够说：“我的整个生命和全部精力，都已经献给世界上最壮丽的事业——为人类的解放而斗争。
                --保尔柯擦金</p>
            <div class="avater">
                <img src="./imgs/avatar.png" alt="">
                <div class="avaterBottom">
                    <span>小猪的头像</span>
                    <p><span>小清新</span></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="./imgs/waterfall08.jpg" alt="">
            <p>一个人的百一生应该是这样度过的：当他回首往事的时候度，他不会因为虚度年华而悔恨，也不会因为碌碌无为而羞耻；这样，在临死的时候，他就能够说：“我的整个生命和全部精力，都已经献给世界上最壮丽的事业——为人类的解放而斗争。
                --保尔柯擦金</p>
            <div class="avater">
                <img src="./imgs/avatar.png" alt="">
                <div class="avaterBottom">
                    <span>小猪的头像</span>
                    <p><span>小清新</span></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="./imgs/waterfall09.jpg" alt="">
            <p>一个人的百一生应该是这样度过的：当他回首往事的时候度，他不会因为虚度年华而悔恨，也不会因为碌碌无为而羞耻；这样，在临死的时候，他就能够说：“我的整个生命和全部精力，都已经献给世界上最壮丽的事业——为人类的解放而斗争。
                --保尔柯擦金</p>
            <div class="avater">
                <img src="./imgs/avatar.png" alt="">
                <div class="avaterBottom">
                    <span>小猪的头像</span>
                    <p><span>小清新</span></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="./imgs/waterfall10.jpg" alt="">
            <p>一个人的百一生应该是这样度过的：当他回首往事的时候度，他不会因为虚度年华而悔恨，也不会因为碌碌无为而羞耻；这样，在临死的时候，他就能够说：“我的整个生命和全部精力，都已经献给世界上最壮丽的事业——为人类的解放而斗争。
                --保尔柯擦金</p>
            <div class="avater">
                <img src="./imgs/avatar.png" alt="">
                <div class="avaterBottom">
                    <span>小猪的头像</span>
                    <p><span>小清新</span></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="./imgs/waterfall08.jpg" alt="">
            <p>一个人的百一生应该是这样度过的：当他回首往事的时候度，他不会因为虚度年华而悔恨，也不会因为碌碌无为而羞耻；这样，在临死的时候，他就能够说：“我的整个生命和全部精力，都已经献给世界上最壮丽的事业——为人类的解放而斗争。
                --保尔柯擦金</p>
            <div class="avater">
                <img src="./imgs/avatar.png" alt="">
                <div class="avaterBottom">
                    <span>小猪的头像</span>
                    <p><span>小清新</span></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="./imgs/waterfall09.jpg" alt="">
            <p>一个人的百一生应该是这样度过的：当他回首往事的时候度，他不会因为虚度年华而悔恨，也不会因为碌碌无为而羞耻；这样，在临死的时候，他就能够说：“我的整个生命和全部精力，都已经献给世界上最壮丽的事业——为人类的解放而斗争。
                --保尔柯擦金</p>
            <div class="avater">
                <img src="./imgs/avatar.png" alt="">
                <div class="avaterBottom">
                    <span>小猪的头像</span>
                    <p><span>小清新</span></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="./imgs/waterfall10.jpg" alt="">
            <p>一个人的百一生应该是这样度过的：当他回首往事的时候度，他不会因为虚度年华而悔恨，也不会因为碌碌无为而羞耻；这样，在临死的时候，他就能够说：“我的整个生命和全部精力，都已经献给世界上最壮丽的事业——为人类的解放而斗争。
                --保尔柯擦金</p>
            <div class="avater">
                <img src="./imgs/avatar.png" alt="">
                <div class="avaterBottom">
                    <span>小猪的头像</span>
                    <p><span>小清新</span></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="./imgs/waterfall08.jpg" alt="">
            <p>一个人的百一生应该是这样度过的：当他回首往事的时候度，他不会因为虚度年华而悔恨，也不会因为碌碌无为而羞耻；这样，在临死的时候，他就能够说：“我的整个生命和全部精力，都已经献给世界上最壮丽的事业——为人类的解放而斗争。
                --保尔柯擦金</p>
            <div class="avater">
                <img src="./imgs/avatar.png" alt="">
                <div class="avaterBottom">
                    <span>小猪的头像</span>
                    <p><span>小清新</span></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="./imgs/waterfall09.jpg" alt="">
            <p>一个人的百一生应该是这样度过的：当他回首往事的时候度，他不会因为虚度年华而悔恨，也不会因为碌碌无为而羞耻；这样，在临死的时候，他就能够说：“我的整个生命和全部精力，都已经献给世界上最壮丽的事业——为人类的解放而斗争。
                --保尔柯擦金</p>
            <div class="avater">
                <img src="./imgs/avatar.png" alt="">
                <div class="avaterBottom">
                    <span>小猪的头像</span>
                    <p><span>小清新</span></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="./imgs/waterfall10.jpg" alt="">
            <p>一个人的百一生应该是这样度过的：当他回首往事的时候度，他不会因为虚度年华而悔恨，也不会因为碌碌无为而羞耻；这样，在临死的时候，他就能够说：“我的整个生命和全部精力，都已经献给世界上最壮丽的事业——为人类的解放而斗争。
                --保尔柯擦金</p>
            <div class="avater">
                <img src="./imgs/avatar.png" alt="">
                <div class="avaterBottom">
                    <span>小猪的头像</span>
                    <p><span>小清新</span></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="./imgs/waterfall08.jpg" alt="">
            <p>一个人的百一生应该是这样度过的：当他回首往事的时候度，他不会因为虚度年华而悔恨，也不会因为碌碌无为而羞耻；这样，在临死的时候，他就能够说：“我的整个生命和全部精力，都已经献给世界上最壮丽的事业——为人类的解放而斗争。
                --保尔柯擦金</p>
            <div class="avater">
                <img src="./imgs/avatar.png" alt="">
                <div class="avaterBottom">
                    <span>小猪的头像</span>
                    <p><span>小清新</span></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="./imgs/waterfall09.jpg" alt="">
            <p>一个人的百一生应该是这样度过的：当他回首往事的时候度，他不会因为虚度年华而悔恨，也不会因为碌碌无为而羞耻；这样，在临死的时候，他就能够说：“我的整个生命和全部精力，都已经献给世界上最壮丽的事业——为人类的解放而斗争。
                --保尔柯擦金</p>
            <div class="avater">
                <img src="./imgs/avatar.png" alt="">
                <div class="avaterBottom">
                    <span>小猪的头像</span>
                    <p><span>小清新</span></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="./imgs/waterfall10.jpg" alt="">
            <p>一个人的百一生应该是这样度过的：当他回首往事的时候度，他不会因为虚度年华而悔恨，也不会因为碌碌无为而羞耻；这样，在临死的时候，他就能够说：“我的整个生命和全部精力，都已经献给世界上最壮丽的事业——为人类的解放而斗争。
                --保尔柯擦金</p>
            <div class="avater">
                <img src="./imgs/avatar.png" alt="">
                <div class="avaterBottom">
                    <span>小猪的头像</span>
                    <p><span>小清新</span></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="./imgs/waterfall08.jpg" alt="">
            <p>一个人的百一生应该是这样度过的：当他回首往事的时候度，他不会因为虚度年华而悔恨，也不会因为碌碌无为而羞耻；这样，在临死的时候，他就能够说：“我的整个生命和全部精力，都已经献给世界上最壮丽的事业——为人类的解放而斗争。
                --保尔柯擦金</p>
            <div class="avater">
                <img src="./imgs/avatar.png" alt="">
                <div class="avaterBottom">
                    <span>小猪的头像</span>
                    <p><span>小清新</span></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="./imgs/waterfall09.jpg" alt="">
            <p>一个人的百一生应该是这样度过的：当他回首往事的时候度，他不会因为虚度年华而悔恨，也不会因为碌碌无为而羞耻；这样，在临死的时候，他就能够说：“我的整个生命和全部精力，都已经献给世界上最壮丽的事业——为人类的解放而斗争。
                --保尔柯擦金</p>
            <div class="avater">
                <img src="./imgs/avatar.png" alt="">
                <div class="avaterBottom">
                    <span>小猪的头像</span>
                    <p><span>小清新</span></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="./imgs/waterfall10.jpg" alt="">
            <p>一个人的百一生应该是这样度过的：当他回首往事的时候度，他不会因为虚度年华而悔恨，也不会因为碌碌无为而羞耻；这样，在临死的时候，他就能够说：“我的整个生命和全部精力，都已经献给世界上最壮丽的事业——为人类的解放而斗争。
                --保尔柯擦金</p>
            <div class="avater">
                <img src="./imgs/avatar.png" alt="">
                <div class="avaterBottom">
                    <span>小猪的头像</span>
                    <p><span>小清新</span></p>
                </div>
            </div>
        </div>

    </div>


    我是接下来的内容....


    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/seeders-waterfall.js"></script>

    <script type="text/javascript">
        $(function(){
            $('.waterfallwarp').waterFall({ spacing: 20 });
        })
        
    </script>

</body>


</html>